<template>
  <div class="header">
    <div class="header-avatar">
      <span v-if="isCanBack" @click="handleGoBack">返回</span>
      <span>{{ userInfo.nickname }}</span>
      <el-dropdown>
        <img class="header-avatar-img" :src="userInfo.avatar" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleGoPersonalCenter"><span>1</span>个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleAddfriends">添加好友</el-dropdown-item>
            <el-dropdown-item @click="handleAddfriends"><span v-if="friendInfo.data">{{ friendInfo.data.length
            }}</span>好友通知</el-dropdown-item>
            <el-dropdown-item @click="handleChangeUserInfo">修改信息</el-dropdown-item>
            <el-dropdown-item @click="handleExitLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div @click.stop="handleCloseSearchModal" class="header-avatar-search" v-if="isShowSearchModal">
      <addFriend @click.stop="" class="header-avatar-addfriend" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { userStore } from '@/store/user'
import { loadLocalLogin } from '@/store/index'
import router from '@/router'
import { ref, reactive, nextTick } from 'vue';
import { computed } from '@vue/reactivity';
import addFriend from "@/components/add-friend/index.vue"

const isShowSearchModal = ref(false)
const friendInfo = reactive({
  data: Array
})

// 获取消息通知


const isCanBack = computed(() => {
  return !!router.options.history.state.back
})
loadLocalLogin()
const user_store = userStore()
// friendInfo.data = user_store.$state.notice.data
const userInfo = user_store.userInfo

const handleChangeUserInfo = () => {
  router.push('/changeUserinfo')
}
const handleGoBack = () => {
  router.back()
}
const handleGoPersonalCenter = () => {
  router.push('personalCenter')
}
const handleExitLogin = () => {
  localStorage.clear()
  window.location.reload()
}
const handleAddfriends = () => {
  isShowSearchModal.value = true
}
const handleCloseSearchModal = () => {
  isShowSearchModal.value = false
}
</script>

<style lang="less" scoped>
.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;

  &-avatar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-img {
      height: 80px;

    }

    &-search {
      display: flex;
      position: fixed;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }

    &-addfriend {
      z-index: 9;
    }
  }
}
</style>